<template>
  <div class="main">
<!--    <div class="basic-box button-bar">-->
<!--      <el-input v-model="searchValue" class="searchInput" placeholder="请输入内容" />-->
<!--      <el-button class="button" type="primary" icon="el-icon-search">搜索</el-button>-->
<!--      <el-dropdown trigger="click" class="button">-->
<!--        <span class="el-dropdown-link">-->
<!--          <el-button type="primary" icon="el-icon-files">书籍分类</el-button>-->
<!--        </span>-->
<!--        <el-dropdown-menu slot="dropdown">-->
<!--          <el-dropdown-item v-for="(item,index) in categoryList">{{item.title}}</el-dropdown-item>-->
<!--        </el-dropdown-menu>-->
<!--      </el-dropdown>-->
<!--    </div>-->
    <div class="basic-box" style="width: 100%">
      <el-table ref="table" :data="tableData">
        <el-table-column prop="isbn" label="isbn" min-width="150" align="center" />
        <el-table-column prop="title" label="书籍名称" min-width="150" align="center" />
<!--        <el-table-column label="书籍封面" min-width="150" align="center">-->
<!--          <template slot-scope="scope">-->
<!--            <el-image :src="tableData[scope.$index].cover" style="width: 50px" />-->
<!--          </template>-->
<!--        </el-table-column>-->

        <el-table-column prop="author" label="书籍作者" min-width="150" align="center" />

        <el-table-column prop="count" label="库存数量" min-width="150" align="center" />

        <el-table-column label="操作" width="200" align="center" fixed="right">
          <template slot-scope="scope">
            <el-button class="action-button" type="primary" size="small" @click="toDetail(scope.row)">查看</el-button>
            <el-button class="action-button" type="success" size="small" @click="toEdit(scope.$index)">编辑</el-button>
            <el-button class="action-button" type="danger" size="small" @click="toDelete(scope.$index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      </div>
    <div class="pagination">
      <span class="demonstration">直接前往</span>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[10, 20, 40, 100]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalData">
      </el-pagination>
    </div>

    <!--    弹窗类组件-->
    <el-dialog title="修改书籍库存数量" :visible.sync="isEditMode" width="20%" center>
      <span><el-input v-model="editValue" style="width: 100%;" placeholder="请输入库存数量" /></span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isEditMode = false">取 消</el-button>
        <el-button type="primary" @click="confirmEdit">保 存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getTotalBookList,setBookCount,deleteBook, getBookTotal} from '@/api/book.js'
import { Message } from 'element-ui'
export default {
  data() {
    return {
      searchValue: '',
      isEditMode: false,
      editValue: '',
      editId: '',
      tableData: [
      ],
      categoryList:[
        {
          "icon" : "wenxue",
          "title" : "文学"
        }, {
          "icon" : "xiaofeipin",
          "title" : "流行"
        }, {
          "icon" : "yishu",
          "title" : "文化"
        }
      ],
      totalData:5,
      page: 1,
      size: 7
    }
  },
  mounted() {
    this.getTableData()
    for (var i = 0; i < this.tableData.length; i++) {
      this.tableData[i]['num'] = Math.round(Math.random() * 10)
    }
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.size = `${val}`
      this.page = 1
      this.getTableData()

    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.page = `${val}`
      this.getTableData()
    },
    toDetail(row) {
      this.$router.push({ path: 'bookManage/bookDetail', query: { 'id': row.isbn }})
    },
    toEdit(index) {
      this.editId = this.tableData[index].isbn
      this.isEditMode = true
    },
    toDelete(index){
      deleteBook({isbn:Number(this.tableData[index].isbn)}).then(
        res=>{
          console.log(res)
          window.location.reload()
        }
      )
    },
    confirmEdit() {
      var form = { isbn: this.editId, count: Number(this.editValue) }
      this.editValue = ''
      this.editId = ''
      //    发送表单
      console.log(form)
      setBookCount(form).then(
        res=>{
          if(res.status === 200) {
            Message({
              message: '操作成功',
              type: 'success',
              duration: 5 * 1000
            })
            window.location.reload();
          }
        }
      )
    },
    getTableData(){
      getBookTotal().then(
        res =>{
          this.totalData = res.data.total
        }
      )
      getTotalBookList(this.page,this.size).then(
        res =>{
          console.log(res.data.table)
          this.tableData = res.data.table
        }
      )
    }
  }
}
</script>

<style scoped lang="less">
  .main{
    margin:  40px 40px 0 40px;
    width: 80%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .basic-box{
    padding: 40px;
    margin-bottom: 20px;
    border-radius: 10px;
  }
  .action-button{
    border-radius: 5px;
    padding: 5px 10px;
    /*border: 1px solid #a2a2a2;*/
  }
  .button-bar{
    /*position: absolute;*/
    /*top: 40px;*/
    /*align-self: flex-end;*/
    width: 40%;
    display: flex;
    flex-direction: row;
    .searchInput{
      width: 200px;
    }
    .button{
      margin-left: 20px;
    }
  }
  .pagination{
    margin: 30px;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items:center;
    justify-content: center;
  }
</style>
